﻿<phone:PhoneApplicationPage xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                            xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
                           xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
                            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                            xmlns:AchievementSample_ViewModels="clr-namespace:AchievementSample.ViewModels" x:Class="AchievementSample.MainPage"
                            mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800" FontFamily="{StaticResource PhoneFontFamilyNormal}"
                            FontSize="{StaticResource PhoneFontSizeNormal}" Foreground="{StaticResource PhoneForegroundBrush}"
                            SupportedOrientations="PortraitOrLandscape" Orientation="Portrait">
  <phone:PhoneApplicationPage.Resources>
    <Style x:Key="ContainerStyle" TargetType="ListBoxItem">
      <Setter Property="Background" Value="Transparent" />
      <Setter Property="BorderThickness" Value="0" />
      <Setter Property="BorderBrush" Value="Transparent" />
      <Setter Property="Padding" Value="0" />
      <Setter Property="HorizontalContentAlignment" Value="Left" />
      <Setter Property="VerticalContentAlignment" Value="Top" />
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="ListBoxItem">
            <Border x:Name="LayoutRoot" BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"
                    HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
              <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                  <VisualState x:Name="Normal" />
                  <VisualState x:Name="MouseOver" />
                  <VisualState x:Name="Disabled">
                    <Storyboard>
                      <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}" />
                      </ObjectAnimationUsingKeyFrames>
                      <DoubleAnimation Duration="0" To=".5" Storyboard.TargetProperty="Opacity"
                                       Storyboard.TargetName="ContentContainer" />
                    </Storyboard>
                  </VisualState>
                </VisualStateGroup>
                <VisualStateGroup x:Name="SelectionStates">
                  <VisualState x:Name="Unselected" />
                  <VisualState x:Name="Selected">
                    <Storyboard>
                      <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
                                                     Storyboard.TargetName="ContentContainer">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}" />
                      </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                  </VisualState>
                </VisualStateGroup>
              </VisualStateManager.VisualStateGroups>
              <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}"
                              Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}"
                              HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                              VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" Margin="0,12" />
            </Border>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </phone:PhoneApplicationPage.Resources>


  <phone:PhoneApplicationPage.DataContext>
    <AchievementSample_ViewModels:MainViewModel />
  </phone:PhoneApplicationPage.DataContext>


  <!--LayoutRoot is the root grid where all page content is placed-->
  <Grid x:Name="LayoutRoot" Background="Transparent">
    <!--Pivot Control-->
    <controls:Pivot>
      <controls:Pivot.Title>
        <TextBlock Text="ACHIEVEMENT SAMPLE" MouseLeftButtonDown="AchievementPageTitle" />
      </controls:Pivot.Title>
      <!--Pivot item one-->
      <controls:PivotItem>
        <controls:PivotItem.Header>
          <TextBlock Text="locked" MouseLeftButtonDown="LockedTitle" />
        </controls:PivotItem.Header>
        <!--Double line list with text wrapping-->
        <ListBox x:Name="FirstListBox" Margin="0,0,-12,0" ItemsSource="{Binding LockedAchievements}"
                 SelectionChanged="ListBoxSelectionChanged" ItemContainerStyle="{StaticResource ContainerStyle}">
          <ListBox.ItemTemplate>
            <DataTemplate>
              <Grid>
                <Grid Visibility="{Binding IsHidden, Converter={StaticResource InvisibilityConverter}}">
                  <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition />
                  </Grid.ColumnDefinitions>
                  <Rectangle Fill="{StaticResource PhoneContrastBackgroundBrush}" HorizontalAlignment="Left" Width="100"
                             Height="100">
                    <Rectangle.OpacityMask>
                      <ImageBrush Stretch="Fill" ImageSource="{Binding LargeImageUri}" />
                    </Rectangle.OpacityMask>
                  </Rectangle>
                  <StackPanel Grid.Column="1">
                    <TextBlock Text="{Binding Title}" TextWrapping="Wrap"
                               Style="{StaticResource PhoneTextTitle3Style}" />
                    <TextBlock Text="{Binding Description}" TextWrapping="Wrap" Margin="12,-6,12,0"
                               Style="{StaticResource PhoneTextSubtleStyle}" />
                  </StackPanel>
                </Grid>
                <Grid Visibility="{Binding IsHidden, Converter={StaticResource VisibilityConverter}}">
                  <StackPanel Grid.Column="1">
                    <TextBlock Text="Hidden Achievement" TextWrapping="Wrap"
                               Style="{StaticResource PhoneTextTitle3Style}" />
                    <TextBlock Text="Unlock this achievement to see it's description."
                               TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}" />
                  </StackPanel>
                </Grid>
              </Grid>
            </DataTemplate>
          </ListBox.ItemTemplate>
        </ListBox>
      </controls:PivotItem>
 
      <!--Pivot item two-->
      <controls:PivotItem>
        <controls:PivotItem.Header>
          <TextBlock Text="unlocked" MouseLeftButtonDown="UnlockedTitle" />
        </controls:PivotItem.Header>
        <!--Triple line list no text wrapping-->
        <ListBox x:Name="SecondListBox" Margin="0,0,-12,0" SelectionChanged="ListBoxSelectionChanged"
                 ItemsSource="{Binding UnlockedAchievements}" ItemContainerStyle="{StaticResource ContainerStyle}">
          <ListBox.ItemTemplate>
            <DataTemplate>
              <Grid>
                <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="Auto" />
                  <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <Rectangle Fill="{StaticResource PhoneContrastBackgroundBrush}"
                           HorizontalAlignment="Left" Width="100" Height="100">
                  <Rectangle.OpacityMask>
                    <ImageBrush Stretch="Fill" ImageSource="{Binding LargeImageUri}" />
                  </Rectangle.OpacityMask>
                </Rectangle>
                <StackPanel Grid.Column="1">
                  <TextBlock Text="{Binding Title}" TextWrapping="Wrap"
                             Style="{StaticResource PhoneTextTitle3Style}" />
                  <TextBlock Text="{Binding Description}" TextWrapping="Wrap" Margin="12,-6,12,0"
                             Style="{StaticResource PhoneTextSubtleStyle}" />
                </StackPanel>
              </Grid>
            </DataTemplate>
          </ListBox.ItemTemplate>
        </ListBox>
      </controls:PivotItem>
    </controls:Pivot>
  </Grid>


</phone:PhoneApplicationPage>